<!--
 * @Author: ZCL
 * @Date: 2020-05-21 14:41:58
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-21 14:41:58
-->
<template>
  <!-- 维修任务 -->
  <div class="repairTask">

    <!-- tab -->
    <div class="tabs-box">
      <div class="tabs">
        <div :class="{'current':tabsInd == index}" v-for="(item,index) in tabs" :key="index" @click="tabsHand(index)">{{item}}</div>
      </div>
    </div>

    <!-- 维修列表 start -->
    <div v-if="this.tabsInd === 0">
      <van-list
        v-if="taskList.length"
        v-model="loading"
        :finished="!canLoadMore"
        finished-text="- 我是有底线的 -"
        @load="getRepairList"
        :offset="num"
        >
        <div v-for="(item,index) in taskList" :key="index">
          <div class="box">
            <div class="left">
              <van-image
                width="85px"
                height="85px"
                :src="item.image_url"
              />
            </div>
            <div class="right">
              <div class="right-top">
                <p class="text">{{ item.f_name }}</p>
                <div><span class="mr-15">编码: {{ item.f_code }}</span> <span>型号: {{ item.f_specs }}</span></div>
              </div>
              <div class="mt-8">
                <!-- rp_status 状态：1待确认 2维修中 3维修完成 4已撤销 -->
                <van-button type="warning" size="small" class="mr-15"
                    v-if="item.rp_status === 1"
                    @click="handleRepair(item.id)"
                  >
                  确认维修
                </van-button>
                <van-button plain type="info" size="small" class="mr-15"
                  v-if="item.rp_status === 2"
                  :to="{
                    name: 'write-repairs-form',
                    query: {
                      id: item.id,
                      f_id: item.f_id,
                      edit: EDIT_TYPES.CREATE,
                      operate: $const.FORM_TYPES.REPAIR_CONFIRM
                    }
                  }">填写维修记录</van-button>
                <van-button plain type="primary" size="small" v-if="item.rp_status === 3">维修完成</van-button>
                <van-button plain type="default" size="small" v-if="item.rp_status === 4">已撤销</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <van-empty
        v-if="!taskList.length"
        class="custom-image"
        :image="require('@/assets/icon/empty2.png')"
        description="暂无维修任务"
      />
    </div>
    <div v-if="this.tabsInd === 1">
      <van-list
        v-if="CompletedTaskList.length"
        v-model="loading"
        :finished="!canLoadMore"
        finished-text="- - 我是有底线的 - -"
        @load="getRepairList"
        :offset="num"
        >
        <div v-for="(item,index) in CompletedTaskList" :key="index">
          <div class="box">
            <div class="left">
              <van-image
                width="85px"
                height="85px"
                :src="item.image_url"
              />
            </div>
            <div class="right">
              <div class="right-top">
                <p class="text">{{ item.f_name }}</p>
                <div><span class="mr-15">编码: {{ item.f_code }}</span> <span>型号: {{ item.f_specs }}</span></div>
              </div>
              <div class="mt-8">
                <!-- rp_status 状态：1待确认 2维修中 3维修完成 4已撤销 -->
                <van-button type="warning" size="small" class="mr-15"
                    v-if="item.rp_status === 1"
                    @click="handleRepair(item.id)"
                  >
                  确认维修
                </van-button>
                <van-button plain type="info" size="small" class="mr-15"
                  v-if="item.rp_status === 2"
                  :to="{
                    name: 'write-repairs-form',
                    query: {
                      id: item.id,
                      f_id: item.f_id,
                      edit: EDIT_TYPES.CREATE,
                      operate: $const.FORM_TYPES.REPAIR_CONFIRM
                    }
                  }">填写维修记录</van-button>
                <van-button plain type="primary" size="small" v-if="item.rp_status === 3">维修完成</van-button>
                <van-button plain type="default" size="small" v-if="item.rp_status === 4">已撤销</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <van-empty
        v-if="!CompletedTaskList.length"
        class="custom-image"
        :image="require('@/assets/icon/empty2.png')"
        description="暂无维修任务"
      />
    </div>
    <!-- 维修列表 end -->

  </div>
</template>

<script>
import { OPERATE_TYPES, EDIT_TYPES } from '@/constant';

export default {
  name: 'RepairTask',
  data () {
    return {
      OPERATE_TYPES,
      EDIT_TYPES,
      tabs: ['新任务', '已完成'],
      tabsInd: 0, // tab的切换
      page: 1,
      page2: 1,
      num: 10,
      loading: false, // 是否处于加载状态
      canLoadMore: true, // 是否已加载完成
      taskList: [], // 新任务列表
      CompletedTaskList: [] // 已完成列表
    };
  },
  methods: {
    // tab
    tabsHand (index) {
      this.tabsInd = index;
      this.getRepairList(this.tabsInd);
    },
    // 获取列表
    getRepairList (tabsInd) {
      this.loading = true;
      // 新任务列表
      if (tabsInd === 0) {
        this.reSet(tabsInd);
        let params = {
          page: this.page,
          num: this.num
        };
        this.$api.getRepairTask(params).then(res => {
          this.loading = false;
          if (res.code === 0) {
            this.taskList = [...this.taskList, ...res.result.data];
            this.totalPage = Number(res.result.last_page);
            this.page++;
            if (this.page > this.totalPage) {
              this.canLoadMore = false;
            }
          }
        });
      // 已完成列表
      } else if (tabsInd === 1) {
        this.reSet(tabsInd);
        let params = {
          page: this.page2,
          num: this.num
        };
        this.$api.getRepairCompleteTask(params).then(res => {
          this.loading = false;
          if (res.code === 0) {
            this.CompletedTaskList = [...this.CompletedTaskList, ...res.result.data];
            this.totalPage = Number(res.result.last_page);
            this.page2++;
            if (this.page2 > this.totalPage) {
              this.canLoadMore = false;
            }
          }
        });
      }
    },
    // 确认维修
    handleRepair (id) {
      this.$dialog.confirm({
        title: '维修',
        message: '确定维修该资产吗?'
      })
        .then(() => {
          let params = {
            id
          };
          this.$api.postRepairTaskConfirm(params).then(res => {
            if (res.code === 0) {
              this.$toast.success('确认成功');
              this.page = 1;
              this.taskList = [];
              this.getRepairList(0);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 重置
    reSet () {
      if (this.tabsInd === 0) {
        this.page2 = 1;
        this.CompletedTaskList = [];
      } else if (this.tabsInd === 1) {
        this.page = 1;
        this.taskList = [];
      }
    }
  },
  created () {
    this.getRepairList(0); // 获取列表
  }
};
</script>

<style lang="scss" scoped>
.repairTask {
  // tab
  .tabs-box {
    margin-bottom: 10px;
    .tabs {
      display: flex;
      height: 44px;
      line-height: 44px;
      text-align: center;
      background-color: #fff;
      div {
        flex: 1;
        font-size: 16px;
        color: #020202;
      }
      div.current {
        color: #0A8EFF;
        border-bottom: 2px solid #0A8EFF;
      }
    }
  }
  // 列表
  ::v-deep.van-button--small {
    height: 26px;
  }
  .box {
    display: flex;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    .left {
      margin-right: 14px;
    }
    .right {
      font-size: 12px;
      color: #BBBBBB;
      line-height: 22px;
      .text {
        font-size: 14px;
        color: #020202;
        padding-top: 3px;
      }
    }
  }
  ::v-deep.van-empty__description {
    margin-top: 0;
  }
}
</style>
